<template>
    <!-- 条件模板 用于创建调用 -->
    <div>
        <el-form ref="conditionForm" :model="form" :inline="true" label-width="90px">
            <!-- 获得条件 -->
            <el-form-item label="行为选择" prop="behavior_id" :rules="filter_rules({required:true})">
                <el-select clearable style="width:100%" v-model="form.behavior_id" placeholder="请选择">
                    <el-option v-for="item in behaviorList" :key="item.id" :label="item.label" :value="item.id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="总次数" prop="total_time" :rules="filter_rules({required:true, type: 'integer'})">
                <el-input clearable v-model.number="form.total_time" placeholder="请输入总次数"></el-input>
            </el-form-item>
            <el-form-item label="每天次数" prop="everyday_time" :rules="filter_rules({required:true, type: 'integer'})">
                <el-input clearable v-model.number="form.everyday_time" placeholder="请输入每天天数"></el-input>
            </el-form-item>
            <el-form-item label="是否连续">
                <el-switch v-model="form.is_continuity" active-color="#13ce66" inactive-color="#C0C4CC"></el-switch>
            </el-form-item>
            <el-form-item label="描述"  prop="medal_desc" :rules="filter_rules({required:true})">
                <textarea cols="70" rows="5" style="padding: 10px; border-radius: 5px;" maxlength="500" placeholder="请输入详细描述..." v-model.trim="form.medal_desc"></textarea>
            </el-form-item>
            <el-form-item label="图片" prop="task_img" :rules="filter_rules({type: 'upload'})">
                <el-upload action="/api/backstage/fileUpload" class="avatar-uploader" name="file_path" :before-upload="beforeAvatarUpload" :on-success='handleLossSuccess' :show-file-list="false">
                    <img v-if="form.task_img" :src="form.task_img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span style="color: #F56C6C;">建议上传600px*600px的png图片</span>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { behavior_listAll } from "@/api/behavior";
import config from '@/utils/conf'

export default {
    name: 'condition',
    data() {
        return {
            conf: config,
            behaviorList: [],
            form: { is_continuity: false, task_img: '' },
            ossPublicUrl: localStorage.getItem("ossPublicUrl"),
            decide: false
        }
    },
    methods: {
        beforeAvatarUpload(file) {
            let name = file.name.split('.');
            if (name[name.length - 1] === 'jpg' || name[name.length - 1] === 'jpeg' || name[name.length - 1] === 'png') {
                return file
            } else {
                this.$message.error('图片只能是 jpeg/png 格式!')
                return false
            }
        },
        handleLossSuccess(res, file, fileList) {
            if (res.status == 100) {
                this.form.task_img = this.ossPublicUrl + '/' + res.data.file_path
            }
        },
        validate() {
            this.$refs['conditionForm'].validate((valid) => {
                if (valid) {
                    this.decide = true;
                } else {
                    this.decide = false;
                    return false;
                }
            });
        },
        clearForm(){
            this.form = { is_continuity: false, task_img: '' }
        },
        editForm(e){
            this.form = {...e, is_continuity: !!e.is_continuity , task_img: e.task_img}
        },
        async getBehavior() {//获取行为
            let { data } = await behavior_listAll({ company_id: localStorage.getItem('companyId') });
            if (data.status == 100) {
                this.behaviorList = data.data.rows.map(item => {
                    return { id: item.id, label: item.behavior_desc }
                });
            }
        },
    },
    created() {
        this.getBehavior()
    }
}
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
.avatar-uploader {
    .el-upload {
        border: $border;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }
}

.avatar-uploader-icon {
    border: $border;
    font-size: 28px;
    color: #8c939d;
    width: $picture-size;
    height: $picture-size;
    line-height: $picture-size;
    text-align: center;
    border-radius: 5px;
}

.avatar {
    width: $picture-size;
    height: $picture-size;
    display: block;
    border-radius: 5px;
}
</style>

